<template>
  <xdh-layout fixed :north="{height: 'auto'}" class="filter-list">
    <el-row slot="north">
      <xdh-panel title="搜索条件" icon="el-icon-menu">
        <template slot="tool">
          <div class="button">
            <el-input placeholder="请输入内容" size="mini" v-model="input5" class="input-with-select">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </template>
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="级别:">
            <el-checkbox-group v-model="form.level" @change="levelChange">
              <el-button :size="checkboxSize" style="margin-right:10px;" :type="form.level.length === 0 ? 'primary': ''" @click="allLevel">全部</el-button>
              <el-checkbox :size="checkboxSize" v-for="(item, idx) in levels" :label="item.value" :key="idx" border>{{item.label}}</el-checkbox>
              <el-checkbox :size="checkboxSize" v-for="(item, idx) in moreLevels" v-if="showAllLevel" :label="item.value" :key="idx" border>{{item.label}}</el-checkbox>
              <el-button :size="checkboxSize" style="margin-left:10px;" @click="showLevel" v-if="!showAllLevel && moreLevels.length > 0">
                展开更多
                <i class="iconfont icon-double-arrow-right"></i>
              </el-button>
              <el-button :size="checkboxSize" style="margin-left:10px;" @click="collapseLevel" v-if="showAllLevel">
                收起
                <i class="iconfont icon-double-arrow-left"></i>
              </el-button>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </xdh-panel>
    </el-row>
    <xdh-list-panel :load="loadData" :fit="mPanelFit" :state="state" ref="listPanel" :title="'人员列表'" :sizes="pageSizes" :size="20">
      <template slot-scope="scope">
        <div v-for="(group, idx) in state.list" :key="idx">
          <div class="group-title">
            <span class="group-name">
              {{group.groupName}}
            </span>
            <el-button type="default" class="group-btn" size="small" @click="goBack()">
              返回
            </el-button>
          </div>
          <filter-item v-for="(item, idy) in state.list[0].list" :item="item" :index="(pageInfo.page - 1)* pageInfo.limit + idy+1" :key="idy">
          </filter-item>
          <div style="clear:both;"></div>
        </div>
      </template>
    </xdh-list-panel>
    <filter-page :groupId="currentGroup"></filter-page>
  </xdh-layout>
</template>
<script>
  import XdhLayout from '@/widgets/xdh-layout';

  import XdhPanel from '@/widgets/xdh-panel';
  import personMixin from '@/base/mixin/person';
  import levelMixin from '@/base/mixin/level';
  import XdhListPanel from '@/widgets/xdh-list-panel';
  import FilterItem from '@/components/focusManage/filter-item';
  import responseStyle from '@/helper/responseStyle';

  export default {
    mixins: [personMixin, levelMixin, responseStyle],
    components: {
      XdhLayout,
      XdhPanel,
      XdhListPanel,
      FilterItem
    },
    data() {
      return {
        groupId: '',
        checkboxSize: 'small',
        state: {
          total: 0,
          list: []
        },
        pageInfo: {
          page: 1,
          limit: 20
        },
        pageSizes: [20, 50, 100, 500],
        form: {
          country: [],
          level: []
        },
        showAllCountry: false,
        showAllLevel: false,
        levelMaxSize: 6,
        levels: [],
        moreLevels: []
      };
    },
    methods: {
      allLevel() {
        this.form.level = [];
        this.$refs.listPanel.reload();
      },
      showLevel() {
        this.showAllLevel = true;
      },
      collapseLevel() {
        this.showAllLevel = false;
      },
      goBack() {
        this.$router.go(-1);
      },
      loadData(page, limit) {
        this.pageInfo.page = page;
        this.pageInfo.limit = limit;
        let query = Object.assign(
          {},
          {
            page: page,
            limit: limit
          }
        );
        return this.getGroupList(query).then(res => {
          let list = [res.list[0]];
          res.list = list;
          this.state = res;
          if (this.pageSizes[this.pageSizes.length - 1] < this.state.total) {
            this.pageSizes.push(this.state.total);
          }
        });
      }
    },
    created() {
      this.fetchLevel().then(res => {
        res.list.forEach((r, idx) => {
          if (idx >= this.levelMaxSize) {
            this.moreLevels.push({
              label: r.name,
              value: r.id
            });
          } else {
            this.levels.push({
              label: r.name,
              value: r.id
            });
          }
        });
      });
      this.groupId = this.$route.params.id;
    }
  };
</script>
<style  type="text/scss" lang="scss" scoped>
  .filter-list {
    .el-form-item {
      margin-bottom: 8px;
    }
  }
  .button {
    float: right;
  }
  .group-title {
    padding: 5px 20px;
    &:after {
      content: '';
      clear: both;
      display: block;
    }
    .group-name {
      background-color: #ff9900;
      color: #fff;
      box-shadow: 1px 1px 2px #ccc;
      float: left;
      padding: 5px 8px;
    }
    .group-btn {
      float: right;
    }
  }
</style>